<template>
  <div class="outer-wrap flex">
    <div class="column-wrap">
      <div class="title">吊重次数</div>
      <div class="flex">
        <div class="data-wrap">
          <span class="number left-num">{{ deviceInfo.monthUseCount }}<span class="text"> 次</span></span>
          <span class="txt">(本月)</span>
        </div>
        <div class="data-wrap">
          <span class="number right-num">{{ deviceInfo.useCount }}<span class="text"> 次</span></span>
          <span class="txt">(累计)</span>
        </div>
      </div>
    </div>

    <div class="column-wrap">
      <div class="title">超载次数</div>
      <div class="flex">
        <div class="data-wrap">
          <span class="number left-num">{{ deviceInfo.monthOverloadCount }}<span class="text"> 次</span></span>
          <span class="txt">(本月)</span>
        </div>
        <div class="data-wrap">
          <span class="number right-num">{{ deviceInfo.overload }}<span class="text"> 次</span></span>
          <span class="txt">(累计)</span>
        </div>
      </div>
    </div>

    <div class="column-wrap">
      <div class="title">超载率</div>
      <div class="flex">
        <div class="data-wrap">
          <span class="number left-num">{{ deviceInfo.monthOverloadPercent }}<span class="text"> %</span></span>
          <span class="txt">(本月)</span>
        </div>
        <div class="data-wrap">
          <span class="number right-num">{{ deviceInfo.overloadPercent }}<span class="text"> %</span></span>
          <span class="txt">(累计)</span>
        </div>
      </div>
    </div>

    <div class="column-wrap">
      <div class="title">使用频率</div>
      <div class="flex">
        <div class="data-wrap">
          <span class="number left-num">{{ deviceInfo.monthUseCountPercent }}<span class="text"> %</span></span>
          <span class="txt">(本月)</span>
        </div>
        <div class="data-wrap">
          <span class="number right-num">{{ deviceInfo.useCountPercent }}<span class="text"> %</span></span>
          <span class="txt">(累计)</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "UpShowInfo",
    components: {},
    data() {
      return {
        deviceInfo: {
          monthOverloadCount: "",
          monthOverloadPercent: "",
          monthUseCount: "",
          overload: "",
          overloadPercent: "",
          useCount: "",
          monthUseCountPercent: "",
          useCountPercent: ""
        }
      }
    },
    props: {
      dataInfo: Object
    },
    watch: {
      dataInfo(val) {
        if (val.craneLoadStatistics.monthOverloadPercent) {
          val.craneLoadStatistics.monthOverloadPercent = val.craneLoadStatistics.monthOverloadPercent.toFixed(1);
        }
        if (val.craneLoadStatistics.overloadPercent) {
          val.craneLoadStatistics.overloadPercent = val.craneLoadStatistics.overloadPercent.toFixed(1);
        }
        if (val.craneLoadStatistics.monthUseCountPercent) {
          val.craneLoadStatistics.monthUseCountPercent = val.craneLoadStatistics.monthUseCountPercent.toFixed(1);
        }
        if (val.craneLoadStatistics.useCountPercent) {
          val.craneLoadStatistics.useCountPercent = val.craneLoadStatistics.useCountPercent.toFixed(1);
        }
        this.deviceInfo = val.craneLoadStatistics;
      }
    },
    created() {
    },
    mounted() {
    },
    methods: {}
  }
</script>

<style scoped lang="scss">
  .outer-wrap{
    height: 100%;
  }

  .column-wrap{
    width: calc(25% - 9px);
    height: 100%;
    margin-right: 12px;
    background: #1f2432;
    color: #c6c9d4;
    font-size: 14px;
    text-align: center;

    &:last-child{
      margin-right: 0;
    }

    .title{
      height: 38%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .data-wrap{
      display: flex;
      flex-direction: column;
      width: 50%;

      .number{
        font-size: 30px;
        border-right: 1px solid #47495c;

        &.right-num{
          border-right: none;
          color: #de4d4d;
        }

        &.left-num {
          color: #449ae7;
        }

        .text{
          font-size: 14px;
          color: #c6c9d4;
        }
      }

      .txt{
        font-size: 12px;
        color: #8d909c;
      }
    }
  }
</style>
